<template>
    <div class="main-box">
        <div class="banner">
            <CarouselBanner />
        </div>
        <Content>
            <template #content>
                <div class="b-w p-20-30">
                    <el-row :gutter="20" class="m-b-30">
                        <el-col :span="16">
                            <!-- 新闻 -->
                            <div class="news m-r-30">
                                <News />
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <!-- 功德 -->
                            <div class="merits-virtues">
                                <MeritsVirtues />
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="r-20">
                        <el-col :span="16">
                            <div class="left m-r-30">
                                <!-- 名人 -->
                                <div class="celebrity m-b-30">
                                    <Celebrity />
                                </div>
                                <!--  成就 -->
                                <div class="achievements">
                                    <Achievements />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <!-- 文化 -->
                            <Culture />
                        </el-col>
                    </el-row>
                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import CarouselBanner from './components/carouselBanner.vue';
import News from './components/news.vue'
import MeritsVirtues from './components/meritsVirtues.vue'
import Celebrity from './components/celebrity.vue'
import Achievements from './components/achievements.vue'
import Culture from './components/culture.vue'
import Pop from '@/components/pop.vue';
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router';

</script>

<style lang="scss">
.main-box {
    overflow: hidden;
}
.list {
  .item {
    margin-bottom: 10px;
    .left {
      .title {
        font-size: 18px !important;
      }
    }
    .right {
      font-size: 15px !important;
    }
  }
}

.list-box {
  margin-top: 10px;
  .item {
    font-size: 20px !important;
  }
}

.title-one,.desc-box > .title {
  font-size: 20px !important;
}
.title-two, .desc-box > .desc {
  font-size: 18px !important;
}
</style>